<template>
    <json-editor-vue         
        ref="jsonEditor" 
        class="json-editor" 
        language="zh-CN" 
        v-model="newData" 
        @update:modelValue="change"/>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "BaseJsonEditor",
});
</script>
<script lang="ts" setup>
import JsonEditorVue from 'json-editor-vue3';
import { ref, watch } from 'vue';
const props = defineProps<{
    data:any
}>()
const emits = defineEmits<{
     (name: "updateData", data: any): any;
}>()
const newData = ref(props.data)
let jsonEditor = ref(null)
const change = (e) => {
    emits('updateData', e)
}
// watch(() => props.data, (newVal) => { console.log(newVal)
//     jsonEditor.value?.setEditorContent(newVal)
// })
defineExpose({
    jsonEditor
})
</script>
<style lang="scss" scoped>
    .json-editor{
        width: 100%;
        height: 220px;
        overflow: hidden;
    }
</style>